<!DOCTYPE html>
<html>
<head>
<title>日报表</title>
<#include "/headerAdminTle.html">
</head>
<body>
<body class="hold-transition skin-blue sidebar-mini" style="background-color: #ecf0f5;">
	<!-- Main content -->
    <section class="content" style="padding: 0px;"  id="app" v-cloak>
	     <!-- SELECT2 EXAMPLE -->
	     <div class="box box-info">
	            <div class="box-header with-border">
		            <div class="row">
					  <div class="col-md-2" style="padding-right: 0px;">
					  <select class="form-control select2">
			                  <option selected="selected" @click="dropdown(-1)">选择查询字段</option>
			                  <option @click="dropdown(6)">所属公司</option>
			          </select>
					  </div>
					  <div class="col-md-2" style="padding-right: 0px;">
					  	<input type="text" class="form-control"  v-model="q.value" @keyup.enter="query"  :placeholder="placeholderValue">
					  </div>
					  <div class="col-md-4">
					  	<a class="btn btn-default btn-flat" @click="query"><i class="fa fa-search"></i>&nbsp;<@ctx.i18n text = "查询"/></a>
					  </div>
					</div>
				</div>
	            <!-- /.box-header -->
	      </div>
	      <div class="box" v-show="appShowList">
		        <div class="box-header">
		        	  <i class="fa fa-clipboard"></i>
		        	  <h4 class="box-title"><small class="text-muted"><@ctx.i18n text = "sys.poi.info"/></small></h4>
		              <div class="box-tools pull-right">
			            <button type="button" class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i></button>
			            <button type="button" class="btn btn-box-tool" data-widget="remove"><i class="fa fa-remove"></i></button>
		          	  </div>
		        </div>
	        	<!-- /.box-header  -->
	        	<div class="box-body">
		             <table id="jqGrid"></table>
			    	 <div id="jqGridPager"></div>
	           </div>
	         <!--./box-body -->
	      </div>
     </section>
    <!-- /.content -->
</body>

<script type="text/javascript">

	var vm = new Vue({
		el:'#app',
		data:{
			appShowList: true,
			updateList:false,
			loading : true,
			title:'',
			box_color:'border-top-color: #00a65a;',//'box-success',//'#3d9970 !important',
			btn_bg:'bg-olive',
			layer:null,
			placeholderValue:'检索信息',
			q:{
				key: 'N',
				value: null
			},
			mach:{
				machId : null,
				machNo: null,
				maccode : 'SN',
				version : '1.0.1',
				lineName:null,//
				licenseNo:null,
				line:null,//
				name:null,//清机人员
				fares:null,
				drivername:null,//司机人员
				clearuserIds:[], //清机人列别
				driveruserIds:[],
				compId:null,
				deptId:null,
				machNoOld:null,
				mageName:null, //管理人员
				userIds:[]
			}
		},
		methods: {
			query: function () {
				vm.reload();
			},
	        reload: function (event) {
				vm.appShowList = true;
				var page = $("#jqGrid").jqGrid('getGridParam','page');
				$("#jqGrid").jqGrid('setGridParam',{ 
					postData:{'key': vm.q.key,'value': vm.q.value},
	                page:page
	            }).trigger("reloadGrid");
			},
	        getSelectedRow :function(){
				var grid = $("#jqGrid");
			    var rowKey = grid.getGridParam("selrow"); //获取行ID
			    if(!rowKey){
			    	error("请选择一条记录");
			    	return;
			    }
			    return grid.jqGrid('getRowData',rowKey);
			},
	        dropdown : function(index){
	        	vm.q.value = '';
	        	if(index == 1){
	        		vm.q.key = 'N';
	        		vm.placeholderValue = "终端编号";
	        	}
	        	if(index == 2){
	        		vm.q.key = 'M';
	        		vm.placeholderValue = "终端唯一码";
	        	}
	        	if(index == 3){
	        		vm.q.key = 'V';
	        		vm.placeholderValue = "终端版本号";
	        	}
	        	if(index == -1){
	        		vm.q.key = '';
	        		vm.placeholderValue = "终端编号";
	        	}
	        	if(index == 4){
	        		vm.q.key = 'C';
	        		vm.placeholderValue = "车牌号码";
	        	}
	        	if(index == 5){
	        		vm.q.key = 'X';
	        		vm.placeholderValue = "线路";
	        	}
	        	if(index == 6){
	        		vm.q.key = 'G';
	        		vm.placeholderValue = "所属公司";
	        	}
	        }
		},
		mounted :function(){
			$("#jqGrid").jqGrid({
		        url: baseURL + '/sys/poi/list',
		        datatype: "json",
		        colModel: [			
					{ label: 'id', name: 'id',hidden: true},
					{ label: lang.i18n['sys.poi.name'], name: 'filename', width: 150,align:'center'}, 
					{ label: lang.i18n['sys.poi.copmName'],  name: 'name', width: 150,align:'center'},
					{ label: lang.i18n['sys.poi.type'], name: 'type', width: 150,align:'center',formatter: function(value, options, row){
						if(row.type == 0){ //日报表
							return "<span class=\"label label-primary\">日报表</span>";
						}else if(row.type == 1){
							return "<span class=\"label label-primary\">月报表</span>";
						}else if(row.type == 2){
							return "<span class=\"label label-primary\">年报表</span>";
						}
					}}, 
					<@shiro.hasPermission name="sys:poi:download")>
						{ label: "下载", name: 'type', width: 50,align:'center',formatter: function(value, options, row){
							return "<a href=\""+baseURL+"sys/poi/download?id="+row.id+"\" ><span class=\"label label-danger\"><i class=\"fa fa-cloud-download\" aria-hidden=\"true\"></i>下载</span></a>";
					}},
					</#if>
					{ label: "预览", name: 'type', width: 50,align:'center',formatter: function(value, options, row){
						return "<a href=\"javascript:;\" onclick=openwindos(\""+row.name+"\",\"sys/preview/bulView?id="+row.id+"\")><span class=\"label label-success\"><i class=\"fa fa-eye\" aria-hidden=\"true\"></i>预览</span></a>";
					}}
		        ],
				viewrecords: true,
		        height: $(window).height() - 245, //设置表格高度
		        rowNum: 15,
				rowList : [15,30,50],
		        rownumbers: true, //显示表序列号
		        rownumWidth: 50, //序列号列宽度
		        autowidth:true,//true,
		        //multiselect: true, //设置表格是否可以多选
		        //sortable:true,
		        sortname: 'id', //设置默认的排序列
		        sortorder:'asc',
		        pager: "#jqGridPager", //表格页脚翻页显示
		        jsonReader : {
		            root: "page.list",
		            page: "page.currPage",
		            total: "page.totalPage",
		            records: "page.totalCount"
		        },
		        prmNames : {
		            page:"page", 
		            rows:"limit",
		            sort: "sidx",
		            order: "order"
		        },
		        gridComplete:function(){ //当表格所有数据都加载完成而且其他的处理也都完成时触发此事件，排序，翻页同样也会触发此事件
		        	//隐藏grid底部滚动条
		        	$("#jqGrid").closest(".ui-jqgrid-bdiv").css({ "overflow-x" : "hidden" }); 
		        	//var parent_column = $("#jqGrid").closest('[class*="col-"]');//list是jQgrid的table的ID
		        	//$("#jqGrid").jqGrid('setGridWidth', parent_column.width());
		        },
		        loadComplete:function(){//当从服务器返回响应时执行，xhr：XMLHttpRequest 对象
			    	var grid = $("#jqGrid");
			        var ids = grid.getDataIDs();  
			        for (var i = 0; i < ids.length; i++) {  
			            grid.setRowData(ids[i], false, {height:20});  
			        	//grid.setGridHeight(30);
			        }  
		        }
		    });
			
		}
	});
</script>
</body>
</html>